<template>
  <view class="user">
    <view class="info">
      <image src="../../static/avatar.png" mode="widthFix" />
      <view class="name">微信用户</view>
    </view>
    <view class="switch">
      <view class="switch-item" :class="{'active':activeIndex===index}" v-for="(item,index) in labelsList"
        :key="item.value" @click="selectWorksByLabel(index)">
        {{item.label}}·{{item.count}}
      </view>
    </view>
    <view class="list" v-if="!activeList?.length">
      <view class="block">
        无数据
      </view>
    </view>
    <view class="list" v-else>
      <view class="list-item" v-for="item in activeList" :key="item.id">
        <view class="infos" :class="{'fits':activeIndex===1}" @click="handleLink(item)">
          <video :src="getCoverPic(item)" v-if="activeIndex === 2"></video>
          <image :src="getCoverPic(item)" v-else :mode="activeIndex?'widthFix':'aspectFill'"></image>
          <view class="title" v-if="!activeIndex">{{getTitle(item)}}</view>
          <view class="tag" v-if="!activeIndex">{{getTag(item)}}</view>
          <view class="collect" @click.stop="cancelLikes(item)" />
        </view>
        <view class="from">
          From :<text>{{baseInfo.businessName||''}}</text>
          <text v-if="activeIndex">《{{item.worksName||''}}》</text>
        </view>
        <view v-if="!item.note" class="add-note note" @click="handleNote(item,'add')"><text>+</text>添加备注</view>
        <view v-else class="note detail-note" @click="handleMore(item)">{{item.note}}
        </view>
      </view>
    </view>
    <Note ref="noteRef" @change="handleNoteChange" />
  </view>
</template>

<script>
  import {
    mapGetters,
    mapActions
  } from 'vuex'
  import {
    doPariseFunc
  } from '@/utils/index.js'

  import Note from './components/Note.vue'
  export default {
    data() {
      return {
        labelsList: [{
          label: '作品',
          value: 'prodDetailBos',
          count: 0
        }, {
          label: '图集',
          value: 'prodPiclists',
          count: 0
        }, {
          label: '视频',
          value: 'prodVideolists',
          count: 0
        }],
        activeIndex: 0
      }
    },
    components: {
      Note
    },
    computed: {
      ...mapGetters(['getUserCollectInfo', 'getBusinessInfo']),
      activeList() {
        this.labelsList.forEach(el => {
          this.$set(el, 'count',this.getUserCollectInfo[el.value]?.length??0)
        })
        return this.getUserCollectInfo[this.labelsList[this.activeIndex].value]
      },
      baseInfo() {
        return this.getBusinessInfo?.baseInfoBo ?? {}
      },
    },
    methods: {
      ...mapActions(['setUserCollectInfo']),
      // 将note赋值 减少请求
      handleNoteChange(params) {
        const item = this.activeList.find(el => {
          const elId = this.activeIndex ? el.id : el.prodInfo.id
          return elId === params.relationId
        })
        if (item) {
          this.$set(item, 'note', params.note)
        }
      },
      handleNote(item, type) {
        const params = {
          userOpenId: uni.getStorageSync('openid') ?? '',
          relationId: !this.activeIndex ? item.prodInfo.id : item.id,
          note: item.note
        }
        this.$refs.noteRef?.openNotePopup(params, type)
      },
      handleMore(item) {
        const _this = this
        uni.showActionSheet({
          itemList: ['编辑', '删除'],
          async success(res) {
            const eventList = ['edit', 'delete']
            _this.handleNote(item, eventList[res.tapIndex])
          }
        })
      },
      cancelLikes(item) {
        const relationId = !this.activeIndex ? item.prodInfo.id : item.id
        const params = {
          userOpenId: uni.getStorageSync('openid'),
          relationId,
          likesType: ['作品', '图集', '视频'][this.activeIndex]
        }
        // 执行取消点赞
        doPariseFunc(1, params, () => {
          this.setUserCollectInfo()
        })
      },
      selectWorksByLabel(index) {
        this.activeIndex = index
      },
      // 跳转
      handleLink(item) {
        if (!this.activeIndex) {
          uni.navigateTo({
            url: `/pages/works/detail?id=${item.prodInfo.id}`
          })
        }
      },
      getTitle(item) {
        return `《${item?.prodInfo?.title??''}》` 
      },
      getTag(item) {
        const tagList = item?.prodInfo?.tagList || []
        return tagList.map(el => `#${el.tagName}`).join(' ')
      },
      getCoverPic(item) {
        switch (this.activeIndex) {
          case 0: {
            return item?.prodInfo?.coverPicture?. [0]?.filePath ?? ''
          }
          default: {
            return item?.filePath ?? ''
          }
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .note {
    width: 710rpx;
  }

  .detail-note {
    width: fit-content;
    background: rgb(241, 242, 246);
    color: #666;
    font-size: 30rpx;
    line-height: 50rpx;
    padding: 0 12rpx;
  }

  .add-note {
    font-size: 26rpx;
    color: #000;
    font-weight: bold;
    text-align: center;
    line-height: 70rpx;
    border: 1px dashed rgb(195, 195, 195);

    text {
      font-size: 32rpx;
      padding-right: 10rpx;
    }
  }

  view,
  text {
    background-color: transparent;
  }

  .info {
    padding: 60rpx 20rpx;
    display: flex;
    align-items: center;
    gap: 20rpx;

    image {
      width: 100rpx;
    }

    .name {
      font-weight: 700;
    }
  }

  .switch {
    position: sticky;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    overflow: auto;
    display: flex;
    flex-wrap: nowrap;
    padding: 20rpx 0;
    background-color: #fff;
    border-bottom: 1px solid #eee;

    .switch-item {
      color: #969696;
      font-size: 32rpx;
      text-align: center;
      min-width: 140rpx;
      white-space: nowrap;
      text-overflow: ellipsis;
      padding-bottom: 15rpx;
    }

    .active {
      color: #000;
      font-weight: 700;
      position: relative;

      &::after {
        content: '';
        display: block;
        background: #000;
        width: 90rpx;
        height: 2px;
        position: absolute;
        left: 50%;
        bottom: -10rpx;
        transform: translate(-50%, 0);
      }
    }
  }

  .list {
    width: 100%;
    padding: 20rpx;

    .block {
      text-align: center;
      color: #999;
      padding-top: 30px;
      font-size: 28rpx;
    }

    .list-item {
      margin-bottom: 30rpx;

      .infos {
        width: calc(100% - 40rpx);
        height: 400rpx;
        position: relative;

        image,
        video {
          width: 100%;
          height: 100%;
        }

        .title,
        .tag {
          width: 100%;
          text-align: center;
          position: absolute;
          color: #fff;
          font-size: 28rpx;
          transform: translate(0, -50%);
        }

        .title {
          top: 43%;
          font-size: 46rpx;
          font-weight: bold;
        }

        .tag {
          top: 58%;
        }
      }

      .fits {
        height: fit-content;
      }

      .from {
        color: #999;
        font-size: 22rpx;
        padding: 10rpx 0;

        text {
          padding-left: 10rpx;
        }
      }
    }
  }
</style>
